<template>
  <el-menu
    :default-active="$route.path"
    background-color="#222"
    text-color="#f4f4f2"
    active-text-color="#ffd04b"
    router
  >
    <template v-for="(menu, index) in $menu">
      <el-submenu :index="menu.path" v-if="menu.children" :key="index">
        <template slot="title">
          <span>{{ menu.title }}</span>
        </template>
        <el-menu-item
          v-for="(subMenu, subIndex) in menu.children.filter((child) => !child.hidden)"
          :key="subIndex"
          :index="subMenu.path.replace(/\:.*\?/, '')"
        >
          {{ subMenu.title }}
        </el-menu-item>
      </el-submenu>
      <!-- 没得children的 -->
      <el-menu-item :index="menu.path" v-if="noChildren(menu)" :key="index">
        {{ menu.title }}
      </el-menu-item>
      <!-- 这里是去其他系统 -->
      <div v-if="noChildrenAndHaveS(menu)" :key="index" class="sp">
        <span @click="toUrl(disUrl)" v-if="menu.path.match(/^\/\$dis/)" class="dis">
          {{ menu.title }}
        </span>
        <span @click="toUrl(sisUrl)" v-if="menu.path.match(/^\/\$statistics/)" class="dis">
          {{ menu.title }}
        </span>
      </div>
    </template>
  </el-menu>
</template>

<script>
  import { mapGetters } from 'vuex';

  export default {
    data() {
      return {
        disUrl: process.env.VUE_APP_DIS_URL,
        sisUrl: process.env.VUE_APP_SIS_URL,
      };
    },
    computed: {
      ...mapGetters(['$menu']),
    },
    methods: {
      // 去其他页面
      toUrl(val) {
        window.open(val);
      },
      // 没有children并且含有特殊字符$
      noChildren(menu) {
        return !menu.children && !menu.path.match(/^\/\$/);
      },
      // 没有children并且含有特殊字符$
      noChildrenAndHaveS(menu) {
        return !menu.children && menu.path.match(/^\/\$/);
      },
    },
    mounted() {
      this.$menu.forEach((item) => {
        // 如果是$去掉children
        if (item.path.match(/^\/\$/)) {
          item.children = null;
        }
      });
    },
  };
</script>

<style lang="less" scoped>
  .el-menu {
    color: white;
    height: 100%;
    min-width: 170px;

    /deep/ .el-submenu__title {
      padding: 0 10px;
    }

    /deep/ .el-icon-arrow-down:before {
      color: white;
      font-weight: bolder;
    }
    .sp {
      height: 56px;
      line-height: 56px;
      padding-left: 20px;
      display: flex;
      .dis {
        display: block;
        width: 100%;
      }
    }
  }
</style>
